<template>
  <div class="main">
    <div id="slider" class="content">
      <div
        class="content-item"
        v-for="item in navList"
        :key="item.id"
        @touchstart="touchstart"
        @touchmove="touchmove"
      >
        <div class="img">
          <img src="../../assets/images/develop.png" />
        </div>
        <div class="title">{{ item.name }}</div>
        <div class="descript">{{ item.description }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeSlider",
  props: ["navList"],
  data() {
    return {
      // imgSrc: [
      //   "../static/slider1.jpeg",
      //   "../static/slider2.jpeg",
      //   "../static/slider3.jpeg",
      //   "../static/slider4.jpeg",
      //   "../static/slider5.jpeg",
      // ],
      startPointX: 0,
      changePointX: 0,
      showIndex: 0,
    };
  },
  methods: {
    show(index) {
      this.changePointX = this.startPointX;
      let slider = document.getElementById("slider");
      // slider.style.marginLeft = `-${240 * index}px`;
    },
    touchstart(e) {
      this.startPointX = e.changedTouches[0].pageX;
    },
    touchmove(e) {
      if (this.startPointX == this.changePointX) {
        return;
      }
      let currPointX = e.changedTouches[0].pageX;
      let leftSlide = this.startPointX - currPointX;
      if (leftSlide > 30 && this.showIndex < this.navList.length - 1) {
        this.show(++this.showIndex);
      } else if (leftSlide < -30 && this.showIndex > 0) {
        this.show(--this.showIndex);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.main {
  width: 100%;
  .content {
    // width: 100%;
    // width: 240px;
    // width: 375px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    transition: 1s;
    // padding: 0 calc(50vw - 160px);
    .content-item {
      width: 240px;
      // width: 24%;
      // width: calc(100% / 4);
      // height: 370px;
      background: #ffffff;
      border-radius: 8px;
      margin-right: 21.5px;
      border: 1px solid #ffffff;
      .img {
        margin: 40px 18px 24px 18px;
      }
      .title {
        margin-left: 20px;
        margin-top: 24px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      .descript {
        margin-left: 20px;
        margin-top: 16px;
        height: 44px;
        font-size: 14px;
        font-family: PingFang-SC-Regular, PingFang-SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.55);
        line-height: 22px;
      }
    }
    // img {
    //   width: 320px;
    //   display: inline;
    //   margin-right: 10px;
    // }
  }
}
</style>
